Over the weekend I had an idea to solve the URL problem, which may even work.

Currently we are sending all requests to the frontend container, which then proxies it to the backend container. Instead we could directly send our API requests to the backend. This way we wouldn't need to adjust the nginx config at all.

We can achieve this through the build environments in Angular. Set the URL for each environment and then prepend it to each call to the API:

// Imaginary example
import { environment } from '../environments/environment';
 
export class RoleService {
  private crudUrl = environment.apiUrl + '/roles';
 
  constructor(private http: HttpClient) {}
 
  getRoles$(): Observable<RolesDto> {
    return this.http.get<RolesDto>(this.crudUrl);
  }
 
 ...
}

The build environment can then be passed through an env variable to the dockerfile, which builds the app with the correct URL and whatnot:

//dockerfile
RUN npm run build -- --output-path=./dist/ --configuration=$PCTS_FRONTEND_ENVIRONMENT

I haven't tried this, so do not get fixated on this in case it does not work but it is worth a try.

I had a quick look at the issue, i propose the following solution:
We use the docker compose overlay mechanism as described here: https://docs.docker.com/compose/how-tos/multiple-compose-files/merge/

We could make an compose.e2e.yaml file which sets the property SPRING_PROFILES_ACTIVE to e2e or whatever profile is used from the spring backend in order to start it in e2e mode.

Starting the correct config should then theoretically reduce to a docker compose up -f compose.e2e.yaml

As far as i am concerned this should already solve all the proxy problems encountered and would be a clean extension from the base image to make it ready for e2e testing without the need to maintain 2 services.

Keep in mind this is not tested just a quick research on the topic brought me to this idea please evaluate in detail.